import { pageRecord } from '@/services/api/api-assess-record';
import { ActionType, ProCard, ProColumns, ProTable, StatisticCard } from '@ant-design/pro-components';
import { Button, Divider, Radio, RadioChangeEvent, Typography } from 'antd';
import Search from 'antd/lib/input/Search';
import 'dayjs/locale/zh-cn';
import React, { useRef, useState } from 'react';
import { useAccess } from 'umi';

interface TableRecordDisseminationTophubProps {
  onRefurbish: () => void;
}

const TableRecordDisseminationTophub: React.FC<TableRecordDisseminationTophubProps> = ({
  onRefurbish,
}) => {
  const [responsive, setResponsive] = useState(false);
  const access = useAccess();
  const actionRef = useRef<ActionType>();

  const [queryParams, setQueryParamsState] = useState<any>();

  const columns: ProColumns<AssessRecordData.RecordPage>[] = [
    {
      title: '级别',
      key: 'datahubSourceName',
      dataIndex: 'datahubLevelName',
      width: '80px',
    },
    {
      title: '来源名称',
      key: 'datahubSourceName',
      dataIndex: 'datahubSourceName',
      width: '80px',
    },
    {
      title: '标题',
      dataIndex: 'name',
      width: '300px',
      render: (dom, record, _index, action) => {
        return (
          <>
            <Typography.Text ellipsis={true}>{record.name}</Typography.Text>
          </>
        );
      },
    },
    {
      title: '发布时间',
      key: 'releaseTime',
      dataIndex: 'releaseTime',
      valueType: 'date',
      width: '80px',
      align: 'center',

      // render: (dom, record, _index, action) => {
      //   return <>{dayjs(record.releaseTime).format('DD/MM/YYYY')}</>;
      // },
    },
    {
      title: '操作',
      key: 'option',
      width: '100px',
      valueType: 'option',
      render: () => [<a key="link">链路</a>, <a key="warn">报警</a>],
    },
  ];
  return (
    <>
      <Divider />

      <ProCard.Group
        title={
          <span
            style={{
              fontWeight: 'bold',
            }}
          >
            发稿情况
          </span>
        }
        direction={'row'}
      >
        <ProCard>
          <StatisticCard
            statistic={{
              title: "发稿总量（篇/得分）",
              value: 0,
              suffix: "/ 0"
            }}

          />
        </ProCard>
        <Divider type={responsive ? 'horizontal' : 'vertical'} />
        <ProCard>
          <StatisticCard
            statistic={{
              title: "中央媒体（篇/得分）",
              value: 0,
              suffix: "/ 0"
            }}

          />
        </ProCard>
        <Divider type={responsive ? 'horizontal' : 'vertical'} />
        <ProCard>
          <StatisticCard
            statistic={{
              title: "市属媒体（篇/得分）",
              value: 0,
              suffix: "/ 0"
            }}

          />
        </ProCard>
      </ProCard.Group>
      <ProTable<AssessRecordData.RecordPage>
        headerTitle={
          <>
            {/* <Search
              placeholder="请输入标题"
              onSearch={(value) => {
                setQueryParamsState({
                  ...queryParams,
                  name: value,
                });
                actionRef.current?.reloadAndRest();
              }}
              style={{ width: 200 }}
            /> */}
          </>
        }
        columns={columns}
        request={async (params = {}) => {
          const response = await pageRecord({
            types: [1, 2],
            ...queryParams,
            ...params,
          });
          return Promise.resolve({
            data: response.data.data,
            total: response.data.total,
            success: response.code === 0,
          });
        }}
        actionRef={actionRef}
        sticky
        scroll={{
          x: '1000px',
        }}
        toolbar={{
          // search: {
          //   onSearch: (value: string) => {
          //     setQueryParamsState({
          //       ...queryParams,
          //       name: value,
          //     });
          //     actionRef.current?.reloadAndRest();
          //   },
          // },
          actions: [
            <Radio.Group
              defaultValue={'all'}
              onChange={(e: RadioChangeEvent) => {
                console.log('=====', e);

                const datahubLevelId = e.target.value;
                setQueryParamsState({
                  ...queryParams,
                  datahubLevelIds: datahubLevelId == 'all' ? ['1000', '2000'] : [e.target.value],
                });
                actionRef.current?.reloadAndRest();
              }}
            >
              <Radio.Button value="all">全部</Radio.Button>
              <Radio.Button value="1000">中央媒体</Radio.Button>
              <Radio.Button value="2000">市属媒体</Radio.Button>
            </Radio.Group>,
            <Button
              key="primary"
              type="primary"
              onClick={() => {
                alert('add');
              }}
            >
              添加
            </Button>,
          ],
        }}
        rowKey="id"
        search={false}
      />
    </>
  );
};
export default TableRecordDisseminationTophub;
